<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="node_modules/cesium/Build/CesiumUnminified/Cesium.js"></script>
	<script src="CesiumSensors.js"></script>
	<script src="GeoserverTerrainProvider.js"></script>
	<link rel="stylesheet" media="screen" href="node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css">
	<style>
		#cesiumContainer{
			width: 90%;
			height: 100%;
		}
		#menuGeneral{
			z-index: 2;
			left: 90%;
		}
	</style>
</head>
<body>
	<div id="cesiumContainer"></div>
	<script>

		var terrainProvider = new Cesium.GeoserverTerrainProvider({
			url : 'http://localhost:8090/geoserver/ows',
			layerName: 'elevation:SRTM90', //elevation:SRTM90Colored
			heightMapWidth: 65,
			styleName:"mySLD",
			maxLevel: 12,
			waterMask:false,
			service: "WMS"
		});

		var imagerie=new Cesium.WebMapServiceImageryProvider({
			url: 'http://localhost:8090/geoserver/ows',
			parameters: {
				format:'image/png',
				transparent:'true'
			},
			layers : 'cartographie:worldMix',
			maximumLevel : 15
		});
		var options={
			imageryProvider:imagerie,
			terrainProvider:terrainProvider,
			baseLayerPicker:false,
			showRenderLoopErrors:true,
			animation:true,
			fullscreenButton:false,
			geocoder:false,
			homeButton:false,
			infoBox:false,
			sceneModePicker:true,
			selectionIndicator:false,
			timeline:false,
			navigationHelpButton:false,
			navigationInstructionsInitiallyVisible:false,
			targetFrameRate:30,
			terrainExaggeration:1.0
		};
		var canvas = document.getElementById('cesiumContainer');
		var viewer = new Cesium.Viewer(canvas,options);
		var hand = new Cesium.ScreenSpaceEventHandler(canvas);
		hand.setInputAction(
			function (movement) {
				if(movement.position != null) {
					var cartesian = scene.camera.pickEllipsoid(movement.position, ellipsoid);
					if (cartesian) {
						var cartographic = ellipsoid.cartesianToCartographic(cartesian);
						cartographic.height=globe.getHeight(cartographic);
						console.log("lat= "+(cartographic.latitude*180/Math.PI)+"°; long="+(cartographic.longitude*180/Math.PI)+"°; altitude="+cartographic.height+" meters")
					}
				}
			}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
		</script>
	</body>
	</html>